//  传感器显示标签
class SensorLabel {
  //id:
  //position:{x,y,z}
  //status:{ alarmValue,
  //         alarm:true/false,
  //         des,...}

  #_alarm_des_p;

  #_id;
  #_other_info_div;
  #_value_p;
  #_alarm;
  #_position;
  constructor() {
    // this.#_id = id;
    // this.#_position = position;
    this.#_alarm = false;
    this.#_alarm_des_p = '';

    this.#_value_p = '';
    this.#_other_info_div = null;

    this._div = this.#create_new_div();
  }

  #create_new_div() {
    //数据标签外框
    let div = document.createElement('div');
    div.className = 'label';
    div.style.display = 'block';

    this.#_value_p = document.createElement('p');
    this.#_value_p.style.display = 'block';
    this.#_value_p.textContent = '123';

    //报警描述
    this.#_alarm_des_p = document.createElement('p');
    this.#_alarm_des_p.style.display = 'block';
    this.#_alarm_des_p.textContent = '';

    //更多信息
    this.#_other_info_div = document.createElement('div');
    this.#_other_info_div.textContent = '更多信息';
    this.#_other_info_div.style.display = 'none';

    //展开按钮
    let expButton = document.createElement('button');
    expButton.textContent = '展开';
    expButton.className = 'model-toggle-btn';
    expButton.onclick = () => {
      this.#_other_info_div.style.display =
        this.#_other_info_div.style.display === 'block' ? 'none' : 'block';
    };

    div.appendChild(this.#_value_p);
    div.appendChild(this.#_alarm_des_p);
    div.appendChild(expButton);
    div.appendChild(this.#_other_info_div);
    return div;
  }

  #setAlarmDes(des) {
    if (des) {
      this.#_alarm_des_p.display = 'block';
      this.#_alarm_des_p.textContent = des;
    } else {
      this.#_alarm_des_p.display = 'none';
    }
  }

  #setVal(val) {
    this.#_value_p.textContent = val;
    if (this.#_alarm) {
      this._value_p.className = 'alarm-p';
    } else {
      this._value_p.className = '';
    }
  }

  #setOtherInfo(info) {
    this.#_other_info_div.innerHtml = '';
    Object.keys(info).forEach((key) => {
      let p = document.createElement('p');
      p.textContent = info[key];
      this.#_other_info_div.appendChild(p);
    });
  }

  //只改变实时值
  setValue(value) {
    this.#setVal(value);
  }

  //报警状态,报警时的值及，报警描述
  setAlarm(alarm, value, des) {
    this.#_alarm = alarm;
    this.#setVal(value);
    this.#setAlarmDes(des);
    //如果是 设置为报警状态
    if (this.#_alarm) {
      this._div.className = 'label label-alarm';
    } else {
      //如果是解除报警状态
      this._div.className = 'label';
    }
  }

  setOtherInfo(other_info) {
    this.#setOtherInfo(other_info);
  }
}

export default SensorLabel;
